<template>
	<div style="width: 100%;">

		<el-card style="width: 48.5%;float: left;margin-left: 1%;height:580px;margin-top: 20px;">
            <template #header>
            <div class="card-header">
                <h3>商品销量前10排行</h3>
            </div>
            </template>
			<el-table
			    :data="data.goods"
			    border
			    style="width: 100%">
			    <el-table-column type="index" :index="1" label="排行" width="50" align="center"></el-table-column>
				<el-table-column prop="title" label="商品"></el-table-column>
				<el-table-column prop="sell_num" label="销量" align="center"></el-table-column>
			</el-table>


        </el-card>

        <el-card style="width: 48.5%;float: left;margin-left: 1%;height:580px;margin-top: 20px;">
            <template #header>
            <div class="card-header">
                <h3>用户消费前10排行</h3>
            </div>
            </template>
			<el-table
			    :data="data.user_xiaofei"
			    border
			    style="width: 100%">
			    <el-table-column type="index" :index="1"  label="排行" width="50" align="center"></el-table-column>
				<el-table-column prop="wx_name" label="用户昵称"></el-table-column>
				<el-table-column prop="total_amount" label="消费金额" align="center"></el-table-column>
			</el-table>

        </el-card>

	</div>

</template>

<script>
	export default {
		name: 'statics_rank',
		data() {
			return {
				data:[]
			}
		},
        mounted() {
			this.getdata()
		},
		methods: {
			async getdata(){
				var res = await this.$API.system.universal.handle.post({},'/order/rank');
				if(res.code == 200){
					 this.data = res.rank

				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}
		}

	}
</script>

<style>

</style>
